<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-06-03 09:10:56
 * @LastEditors: cxguo
 * @LastEditTime: 2020-06-03 09:20:01
-->
<template>
  <div class="border-gay bg-gay clearfix">
    <el-row class="report-statistics">
      <el-col :span="4" class="border-l-gay">
        <p>
          <span>销售额</span><br>
          <i v-if="isShowLoading(saleInfo.amountPayable)" class="el-icon-loading" />
          <b v-if="!isShowLoading(saleInfo.amountPayable)" class="color-red">{{ saleInfo.amountPayable|| 0 }}</b>
        </p>
      </el-col>
      <el-col :span="4" class="border-l-gay">
        <p>
          <span>销售毛利</span><br>
          <i v-if="isShowLoading(saleInfo.grossProfit)" class="el-icon-loading" />
          <b v-if="!isShowLoading(saleInfo.grossProfit)" class="color-red">{{ saleInfo.grossProfit || 0 }}</b>
        </p>
      </el-col>
      <el-col :span="4" class="border-l-gay">
        <p>
          <span>销售总笔数</span><br>
          <i v-if="isShowLoading(saleInfo.billCount)" class="el-icon-loading" />
          <b v-if="!isShowLoading(saleInfo.billCount)">{{ saleInfo.billCount || 0 }}</b>
        </p>
      </el-col>
      <el-col :span="4" class="border-l-gay">
        <p>
          <span>日均销售额</span><br>
          <i v-if="isShowLoading(saleInfo.grossProfit)" class="el-icon-loading" />
          <b v-if="!isShowLoading(saleInfo.grossProfit)">{{ saleInfo.grossProfit || 0 }}</b>
        </p>
      </el-col>
      <el-col :span="4" class="border-l-gay">
        <p>
          <span>日均销售毛利</span><br>
          <i v-if="isShowLoading(saleInfo.grossProfitPer)" class="el-icon-loading" />
          <b v-if="!isShowLoading(saleInfo.grossProfitPer)">{{ saleInfo.grossProfitPer || 0 }}</b>
        </p>
      </el-col>
      <el-col :span="4" class="border-l-gay">
        <p>
          <span>日均销售笔数</span><br>
          <i v-if="isShowLoading(saleInfo.grossProfitPer)" class="el-icon-loading" />
          <b v-if="!isShowLoading(saleInfo.grossProfitPer)">{{ saleInfo.grossProfitPer || 0 }}</b>
        </p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    saleInfo: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    isShowLoading() {
      return false
    }
  }
}
</script>

<style>

</style>
